<template>
	<view class="fixed-bottom bg-danger mx-2 mb-1" style="height: 180rpx;background-color: #d1ccc0;opacity: 0.9;"
		@tap="toDetailPage" :style="{bottom: `${windowBottom}px`}">
		<!-- 进度部分 -->
		<view class="flex align-center justify-center font" style="color: #7a8388;" @tap.stop>
			<!-- 歌曲总时长 -->
			<view>{{durationTime|formatTime}}</view>
			<!-- 进度条 -->
			<view style="width: 500rpx;">
				<slider block-size="16" activeColor="#e48267" backgroundColor="#eef2f3" :max="durationTime"
					:value="currentTime" @change="sliderToPlay" @changing="sliderToPlay" />
			</view>
			<!-- 播放的当前时间 -->
			<view>{{currentTime|formatTime}}</view>
		</view>
		<view class="flex align-center justify-between mx-2" style="height: 95rpx;">
			<!-- 音频相关信息 -->
			<view class="font" style="color: #424651">
				<view>歌手-{{singerName}}</view>
				<view>歌曲-{{audioName}}</view>
			</view>
			<!-- 音频按钮 -->
			<view class="flex align-center justify-center" @tap.stop>
				<view class="animated" hover-class="pulse" @tap="PreOrNext('pre')">
					<myIcon iconId="icon-shangyishou" iconSize="75"></myIcon>
				</view>
				<view @tap='PlayOrPause'>
					<myIcon :iconId="playStatus?'icon-bofang':'icon-ziyuan'" iconSize="75" class="mx-2"></myIcon>
				</view>
				<view class="animated" hover-class="pulse" @tap="PreOrNext('next')">
					<myIcon iconId="icon-xiayishou" iconSize="75"></myIcon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import unit from '@/common/unit.js'
	export default {
		data() {
			return {
				// uni.getSystemInfoSync().windowBottom可以获取h5中的tabBar的高度,其他的都是0
				windowBottom: uni.getSystemInfoSync().windowBottom
			}
		},
		filters: {
			formatTime(num){
				if(num === 100){
					return unit.formatTime(0)
				}
				return unit.formatTime(num)
			}
		},
		computed: {
			...mapState({
				playStatus: ({
					audio
				}) => audio.playStatus,
				durationTime: ({
					audio
				}) => audio.durationTime,
				currentTime: ({
					audio
				}) => audio.currentTime
			}),
			...mapGetters([
				'audioName',
				'singerName'
			])
		},
		methods: {
			...mapMutations([
				'destruction'
			]),
			...mapActions([
				'init',
				'PlayOrPause',
				'PreOrNext',
				'sliderToPlay'
			]),
			toDetailPage() {
				uni.navigateTo({
					url: '/pages/musicDetail/musicDetail'
				})
			}
		},
		mounted() {
			this.init()
		},
		destroyed() {
			this.destruction()
		}
	}
</script>

<style>

</style>
